<template>
  <div :style="'width:' + mapWidth + ';height:' + mapHeight" class="mapChart">
    <div class="header-t">
      <div class="back" v-if="mapLevel !== 0" @click="backFn">返回</div>
      <div class="reset" @click="resetFn()">重置</div>
    </div>
    <div id="map"></div>
  </div>
</template>
<script setup>
import * as echarts from 'echarts'
import './bjMap'
import { chartMap } from './map' // 地图
import { onMounted, ref, watch, onBeforeUnmount, onBeforeMount } from 'vue'
let myCharts = null
const props = defineProps({
  mapWidth: {
    type: String,
    default: 'calc(100vw - 50vw)',
  },
  mapHeight: {
    type: String,
    default: '56vh',
  },
  mapData: {
    type: Array,
    default: () => [
      { name: '东城区', value: 70, value1: 420 },
      { name: '西城区', value: 60, value1: 550 },
      { name: '朝阳区', value: 50, value1: 630 },
      { name: '丰台区', value: 40, value1: 720 },
      { name: '石景山区', value: 30, value1: 810 },
      { name: '海淀区', value: 80, value1: 80 },
      { name: '门头沟区', value: 25, value1: 860 },
      { name: '房山区', value: 35, value1: 760 },
      { name: '通州区', value: 45, value1: 660 },
      { name: '顺义区', value: 55, value1: 560 },
      { name: '昌平区', value: 65, value1: 470 },
      { name: '大兴区', value: 75, value1: 370 },
      { name: '怀柔区', value: 20, value1: 910 },
      { name: '平谷区', value: 15, value1: 960 },
      { name: '密云区', value: 10, value1: 1010 },
      { name: '延庆区', value: 5, value1: 1060 },
    ],
  },
})
// const myCharts = ref(null)
const initMap = () => {
  let chart = document.getElementById('map')
  chart.removeAttribute('_echarts_instance_')
  myCharts = echarts.init(chart)
  upDateMap()
  myCharts.on('click', handleClick)
  // myCharts1.on('datarangeselected', function (params) {
  //   myCharts1.dispatchAction({ type: 'mapToggleSelect' })
  // })
}
const upDateMap = () => {
  chartMap.tooltip.formatter = function (params) {
    const { data } = params
    let content = ``
    // <p>区县名称：${data?.name || '--'}</p>
    content = `<div>
              <p>房屋总数：${data?.zcount || 0}</p>
              <p>自查房屋数量：${data?.zccount || 0}</p>
              <p>自查隐患数量：${data?.yhcount || 0}</p>
              <p>自查整改数量：${data?.zgcount || 0}</p>
            </div>
           `
    return content
  }
  // 更新地图数据
  chartMap.series[0].data = props.mapData
  // 配置图例标题
  chartMap.visualMap.text = [`自查进度（比例）`]
  // console.log(chartMap, 'chartmap')
  // 导入配置项
  myCharts.setOption(chartMap, true)
  window.addEventListener('resize', function () {
    myCharts.resize()
    // upDateMap()
  })
}
const mapLevel = ref(0)
const lastClickedQu = ref('') // 上一个区
const lastClickedXZ = ref('') // 上一个乡镇
const handleClick = (params) => {
  if (mapLevel.value === 0) {
    handleLevel0(params)
  } else if (mapLevel.value === 1) {
    handleLevel1(params)
  }
}
// 点击到 各个区
const handleLevel0 = (params) => {
  let code = params.data.code
  /* @vite-ignore */
  import(`../../../geo/区(js)/${code}`)
    // import(`@/geo/省份数据/js(省份)/110116`)
    .then((module) => {
      chartMap.series[0].map = params.name
      chartMap.series[0].data = []
      // 应先调接口，请求 地图data 数据
      upDateMap()
      mapLevel.value = 1 // 更新地图层级
      // 保存上一次点击的省份名称
      lastClickedQu.value = params.code
    })
    .catch((error) => {
      console.error('导入地图时发生错误：', error)
    })
}
// 点击到 各个乡镇
const handleLevel1 = (params) => {
  console.log('@params1 ===各个乡镇', params)
  let code = params.data.code
  /* @vite-ignore */
  import(`../../../geo/乡镇(js)/${code}`)
    .then((module) => {
      chartMap.series[0].map = params.name
      chartMap.series[0].data = []
      // 应先调接口，请求 地图data 数据
      upDateMap()
      mapLevel.value = 2 // 更新地图层级
      // 保存上一次点击的省份名称
      lastClickedXZ.value = params.code
    })
    .catch((error) => {
      console.error('导入地图时发生错误：', error)
    })
}
const backFn = () => {
  if (mapLevel.value > 0) {
    if (mapLevel.value === 1) {
      chartMap.series[0].map = 'beijing'
      mapLevel.value = 0 // 更新地图层级
      lastClickedQu.value = '' // 清空上一次点击的省份名称
      console.log('@mapLevel.value==', mapLevel.value)
    } else if (mapLevel.value === 2) {
      chartMap.series[0].map = lastClickedQu.value
      mapLevel.value = 1 // 更新地图层级
      lastClickedXZ.value = '' // 清空上一次点击的省份名称
    }
    upDateMap()
  }
}
const resetFn = () => {
  upDateMap()
}
watch(
  () => props.mapData,
  () => {
    // 当 props.mapData 变化时，触发更新地图数据
    // upDateMap()
    initMap()
  }
)

onMounted(() => {
  // initMap()
  // myCharts.value.on('click', handleClick)
  // myCharts.value.on('datarangeselected', function (params) {
  //   myCharts.value.dispatchAction({ type: 'mapToggleSelect' })
  // })
})
</script>
<style scoped lang="scss">
.mapChart {
  position: relative;
  .header-t {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    border: 1px solid red;
    z-index: 999999999;
    .back {
      // width: 50%;
      height: 40px;
      line-height: 40px;
      cursor: pointer;
    }
    .reset {
      margin-left: 15px;
      cursor: pointer;
      // width: 50%;
      height: 40px;
      line-height: 40px;
      cursor: pointer;
    }
  }
}
#map {
  width: 100% !important;
  height: 100% !important;
}

#map div {
  padding: 0 !important;
  border: #fff !important;
  background-color: transparent !important;
}
</style>
